<template>
  <q-dialog v-model="modalities.isCreating"
            @close="modalities.isCreating = false">
    <q-card class="q-pa-md"
            style="width: 700px; max-width: 80vw; height: 60%">
      <q-item-label class="text-h5">
        {{ 'Создать новую специализацию' }}
      </q-item-label>
      <q-item class="column items-center justify-between">
        <q-input v-model="modalityForm.name"
                 :rules="[val => !!val || 'Поле Имя обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 label="Имя" />
        <q-input v-model="modalityForm.code"
                 :rules="[val => !!val || 'Поле Код обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="login"
                 label="Код"/>
      </q-item>
      <q-item>
        <q-btn class="q-mt-md"
               color="primary"
               style="width: 100%; border-radius: 4px"
               @click="handleModalityUser">
          {{ 'Создать' }}
        </q-btn>
      </q-item>
    </q-card>
  </q-dialog>
</template>

<script setup>

import {defineComponent, reactive} from "vue";
import {modalitiesStore} from "stores/modalities-store";

defineComponent({
  name: 'CreateModalityModal'
});

const modalities = modalitiesStore()

const modalityForm = reactive({
  email: '',
  password: ''
})

const handleModalityUser = async () => {
  try {
    await modalities.createModality(modalityForm)
  } catch (err) {
    console.error(err)
  }
}

</script>


<style scoped lang="scss">

</style>
